<script setup lang="ts">
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUnmount,
  onUnmounted,
  onBeforeUpdate,
  onUpdated,
  onRenderTracked,
  onRenderTriggered,
  onErrorCaptured,
  defineAsyncComponent,
} from "vue";

const ErrorCom = defineAsyncComponent(() => import("@/components/LError.vue"));

// 异步组件可以处理代码分割的问题
const visible = ref(true);
onBeforeMount(() => {
  console.log("onBeforeMount");
});
onMounted(() => {
  console.log("onMounted");
});
onBeforeUnmount(() => {
  console.log("onBeforeUnmount");
});
onUnmounted(() => {
  console.log("onUnmounted");
});
onBeforeUpdate(() => {
  console.log("onBeforeUpdate");
});
onUpdated(() => {
  console.log("onUpdated");
});
onRenderTracked(() => {
  console.log("onRenderTracked");
});
onRenderTriggered(() => {
  console.log("onRenderTriggered");
});
onErrorCaptured((err, instance, info) => {
  console.log("onErrorCaptured:", err, instance, info);
});
</script>
<template>
  <button @click="visible = !visible">激活、隐藏组件</button>
  <Transition name="fade" mode="default" :duration="600" appear>
    <KeepAlive>
      <ErrorCom v-if="visible" />
    </KeepAlive>
  </Transition>
</template>
